<template>
  <PageContainer title="与作家会话">
    <!-- 调试用状态提示（仅开发环境显示） -->
    <div v-if="isDev" style="padding: 8px 16px; background: #fff; margin: 8px; border-radius: 4px; font-size: 12px; color: #666;">
      <p>当前会话ID：{{ sessionId }} | 作家ID：{{ authorId }}</p>
    </div>

    <div class="chat-container">
      <!-- 1. 顶部作家信息栏（替换作家端的客服信息） -->
      <div class="chat-header">
        <!-- 作家头像 -->
        <div class="avatar" @click="showAuthorProfile = true">
          <img :src="authorAvatar" alt="作家头像" class="avatar-img" />
        </div>
        <!-- 作家核心信息 -->
        <div class="author-info">
          <h3 class="author-name">{{ authorNickname || '未知作家' }}</h3>
          <p class="session-status" :class="getSessionStatusClass(sessionStatus)">
            {{ formatSessionStatus(sessionStatus) }}
          </p>
        </div>
        <!-- 操作按钮：返回列表 + 查看资料 -->
        <div class="header-actions">
          <el-button type="text" @click="handleGoBack" class="back-btn">
            <el-icon><ArrowLeft /></el-icon> 返回工单
          </el-button>
          <el-button type="text" @click="showAuthorProfile = true" class="profile-btn">
            <el-icon><User /></el-icon> 作家资料
          </el-button>
        </div>
      </div>

      <!-- 2. 中间消息列表区域（角色反转：客服发右对齐，作家发左对齐） -->
      <div class="chat-messages" ref="messageContainerRef">
        <!-- 加载骨架屏 -->
        <div class="loading-skeleton" v-if="loadingHistory">
          <el-skeleton animation="wave" :rows="5" class="skeleton-item" />
        </div>
        <!-- 无消息提示 -->
        <el-empty 
          description="暂无聊天记录，开始对话吧～" 
          v-else-if="messageList.length === 0 && !loadingHistory"
          class="empty-tip"
        />
        <!-- 消息列表 -->
        <div 
          class="message-item" 
          v-for="(msg, index) in messageList" 
          :key="msg._id || `msg-${index}`"
          :class="{
            'send-message': msg.senderType === 'Admin', // 客服发送（右）
            'receive-message': msg.senderType === 'User' // 作家发送（左）
          }"
        >
          <div class="message-bubble">
            <p class="message-content">{{ msg.content }}</p>
            <div class="message-meta">
              <span class="send-time">{{ formatMessageTime(msg.sendTime) }}</span>
              <!-- 仅客服发送的消息显示已读状态 -->
              <span 
                class="read-tag" 
                v-if="msg.senderType === 'Admin'"
              >
                {{ msg.isRead ? '已读' : '未读' }}
              </span>
            </div>
          </div>
        </div>
        <!-- 加载更多历史消息 -->
        <div class="load-more-wrap" v-if="hasMoreHistory && !loadingMore">
          <el-button 
            type="text" 
            @click="handleLoadMoreHistory"
            class="load-more-btn"
          >
            加载更多历史消息
          </el-button>
        </div>
        <div class="loading-more-tip" v-if="loadingMore">
          <el-loading-spinner size="18" />
          <span class="loading-text">加载中...</span>
        </div>
      </div>

      <!-- 3. 底部输入框区域（与作家端一致，调整按钮禁用逻辑） -->
      <div class="chat-input-area">
        <el-input
          v-model="inputMessage"
          type="textarea"
          :rows="3"
          placeholder="请输入消息内容..."
          @keydown.enter.prevent="handleSendMessage"
          clearable
          class="message-input"
        />
        <el-button 
          type="primary" 
          @click="handleSendMessage"
          class="send-btn"
          :disabled="!inputMessage.trim() || !sessionId || loadingSend" 
        >
          {{ loadingSend ? '发送中...' : '发送' }}
        </el-button>
      </div>

      <!-- 作家资料弹窗（新增：查看作家详情） -->
      <el-dialog
        v-model="showAuthorProfile"
        title="作家资料"
        width="30%"
        :before-close="handleCloseProfile"
      >
        <div class="profile-container" v-if="!loadingProfile">
          <div class="profile-avatar">
            <img :src="authorAvatar" alt="作家头像" />
          </div>
          <div class="profile-info">
            <p><span class="label">笔名：</span>{{ authorNickname || '未知' }}</p>
            <p><span class="label">用户名：</span>{{ authorInfo.username || '未知' }}</p>
            <p><span class="label">邮箱：</span>{{ authorInfo.email || '未填写' }}</p>
            <p><span class="label">关联会话：</span>{{ sessionId }}</p>
            <p><span class="label">会话状态：</span>{{ formatSessionStatus(sessionStatus) }}</p>
          </div>
        </div>
        <el-skeleton v-else :rows="4" class="profile-skeleton" />
      </el-dialog>
    </div>
  </PageContainer>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElEmpty, ElSkeleton, ElIcon, ElDialog, ElLoading } from 'element-plus';
import { ArrowLeft, User } from '@element-plus/icons-vue';
import PageContainer from '@/components/PageContainer.vue';
import { useUserStore } from '@/stores/admin';
// 客服专用接口：发送消息、历史记录、作家资料
import { sendMessage, getMessageHistory, getAuthorInfo,getAuthorList } from '@/api/service';
// 默认头像（作家端用service.jpg，客服端用作家默认头像）
import authorDefaultAvatar from '@/assets/default.png';

// -------------------------- 1. 基础状态定义 --------------------------
const isDev = import.meta.env.DEV;
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const messageContainerRef = ref(null);

// 路由参数：从作家列表跳转时携带 sessionId（关键）
const sessionId = ref(route.params.id || '');
// 作家相关状态
const authorId = ref(''); // 作家ID（从历史消息/接口中获取）
const authorNickname = ref(''); // 作家笔名
const authorAvatar = ref(''); // 作家头像
const authorInfo = ref({}); // 作家完整资料（用户名、邮箱等）
// 会话状态
const sessionStatus = ref('active'); // 默认为活跃，后续可从接口同步
// 消息相关状态
const inputMessage = ref('');
const messageList = ref([]);
const loadingHistory = ref(true);
const loadingMore = ref(false);
const loadingSend = ref(false);
const hasMoreHistory = ref(true);
// 作家资料弹窗状态
const showAuthorProfile = ref(false);
const loadingProfile = ref(false);

// 分页配置（与后端一致：默认每页20条）
const pagination = ref({ 
  page: 1, 
  pageSize: 20, 
  total: 0, 
  totalPage: 0 
});

// -------------------------- 2. 核心计算属性 --------------------------
// 当前客服信息（发送方：Admin角色）
const currentAdmin = computed(() => ({
  id: userStore.user?.id || '', // 客服ID（从Pinia获取，需登录）
  type: 'Admin' // 固定为Admin，与作家端的User区分
}));

// 目标作家信息（接收方：User角色）
const targetAuthor = computed(() => ({
  id: authorId.value,
  type: 'User' // 固定为User，与客服端的Admin区分
}));

// -------------------------- 3. 工具函数 --------------------------
/** 格式化会话状态（中文显示） */
const formatSessionStatus = (status) => {
  const statusMap = { active: '活跃', closed: '已关闭' };
  return statusMap[status] || '未知';
};

/** 会话状态样式（活跃绿色/已关闭灰色） */
const getSessionStatusClass = (status) => {
  return status === 'active' ? 'status-active' : 'status-closed';
};

/** 格式化消息时间（例：2025-01-01 14:30） */
const formatMessageTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit'
  });
};

/** 滚动到最新消息（消息发送/加载后调用） */
const scrollToLatestMessage = () => {
  nextTick(() => {
    if (messageContainerRef.value) {
      messageContainerRef.value.scrollTop = messageContainerRef.value.scrollHeight;
    }
  });
};

/** 检查客服登录状态（未登录则跳转） */
const checkAdminLogin = () => {
  if (!userStore.user?.id || userStore.user?.role !== 'customer_service') {
    ElMessage.error('请以客服身份登录');
    router.push('/login');
    return false;
  }
  return true;
};

// -------------------------- 4. 核心业务逻辑（重点修复报错相关） --------------------------
/** 1. 加载历史消息（客服专用接口，需sessionId） */
const loadChatHistory = async (page = 1) => {
  if (!sessionId.value) {
    console.warn('[调试] 缺少sessionId，无法加载历史消息');
    loadingHistory.value = false;
    return;
  }

  // 区分首次加载和加载更多的loading状态
  if (page === 1) loadingHistory.value = true;
  else loadingMore.value = true;

  try {
    const res = await getMessageHistory({
      sessionId: sessionId.value,
      page,
      pageSize: pagination.value.pageSize
    });

    if (res.data.code !== '0000') {
      throw new Error(`加载历史消息失败：${res.data.msg || '未知错误'}`);
    }

    const { list, pagination: resPagination } = res.data.data || { list: [], pagination: {} };
    // 更新分页信息
    pagination.value = {
      ...resPagination,
      page: Number(resPagination.page),
      pageSize: Number(resPagination.pageSize),
      totalPage: Math.ceil(Number(resPagination.total) / Number(resPagination.pageSize))
    };
    hasMoreHistory.value = pagination.value.page < pagination.value.totalPage;

    // 首次加载：初始化消息列表 + 提取作家ID（从第一条消息的发送方/接收方）
    if (page === 1) {
      messageList.value = list;
      // 提取作家ID：若有消息，取User角色的ID（作家是User，客服是Admin）
      if (list.length > 0) {
        const firstMsg = list[0];
        authorId.value = firstMsg.senderType === 'User' 
          ? firstMsg.senderId 
          : firstMsg.receiverId;
        console.log('[调试] 从历史消息提取作家ID：', authorId.value);
        // 同步加载作家信息和会话状态
        await Promise.all([
          loadAuthorInfo(),
          syncSessionStatus()
        ]);
      } else {
        // 无历史消息时：从会话接口获取作家ID（新增逻辑，避免authorId为空）
        await getAuthorIdFromSession();
      }
    } else {
      // 加载更多：拼接历史消息（旧消息在前，新消息在后）
      messageList.value = [...list, ...messageList.value];
    }

    // 滚动到最新消息（仅首次加载或加载更多后）
    scrollToLatestMessage();

  } catch (err) {
    console.error('[调试] 加载历史消息异常：', err.message || err);
    ElMessage.error(err.message || '历史消息加载失败，请重试');
    if (page === 1) messageList.value = [];
  } finally {
    loadingHistory.value = false;
    loadingMore.value = false;
  }
};

/** 新增：从会话接口获取作家ID（解决无历史消息时authorId为空的问题） */
const getAuthorIdFromSession = async () => {
  try {
    // 调用会话详情接口（需后端新增，此处用模拟逻辑，实际项目替换为真实接口）
    // 模拟：从Session集合查询当前sessionId对应的作家ID
    const sessionRes = await request.get('/service/sessionDetail', {
      params: { sessionId: sessionId.value }
    });
    if (sessionRes.data.code === '0000') {
      authorId.value = sessionRes.data.data.authorId;
      console.log('[调试] 从会话详情获取作家ID：', authorId.value);
      // 加载作家信息
      await loadAuthorInfo();
    }
  } catch (err) {
    console.warn('[调试] 无历史消息时无法获取作家ID：', err.message);
    authorNickname.value = '未知作家';
  }
};

/** 2. 加载作家信息（重点修复：完善接口调用、数据校验、错误处理） */
const loadAuthorInfo = async () => {
  if (!authorId.value) {
    console.warn('[调试] 缺少作家ID，无法加载作家信息');
    authorNickname.value = '未知作家';
    return;
  }

  console.log('[调试] 开始调用getAuthorInfo接口，参数：', { authorId: authorId.value });
  try {
    // 调用作家信息接口（确保参数正确传递到query）
    const res = await getAuthorInfo({ authorId: authorId.value });
    console.log('[调试] getAuthorInfo接口完整返回：', JSON.stringify(res));

    // 校验接口返回格式（避免res.data不存在）
    if (!res || !res.data) {
      throw new Error('接口返回格式异常，无data字段');
    }

    // 处理接口返回的不同状态码
    if (res.data.code !== '0000') {
      // 针对性提示：权限不足/作家不存在/参数错误
      const errorMsgMap = {
        '2041': '仅客服有权限获取作家资料',
        '2042': '未传入作家ID，无法获取资料',
        '2043': '该作家不属于你负责的会话，无权限查看',
        '2044': '作家不存在或已注销',
        '2045': '获取作家资料失败'
      };
      const errorMsg = errorMsgMap[res.data.code] || res.data.msg || '获取作家资料失败';
      throw new Error(errorMsg);
    }

    // 校验返回数据是否存在
    const authorData = res.data.data || {};
    if (!authorData.id) {
      throw new Error('接口返回作家数据异常，缺少核心字段');
    }

    // 更新作家状态：昵称、头像、完整资料
    authorNickname.value = authorData.nickname || '未知作家';
    authorAvatar.value = authorData.avatar || authorDefaultAvatar;
    authorInfo.value = {
      username: authorData.username || '未知',
      email: authorData.email || '未填写'
    };
    console.log('[调试] 作家信息加载成功：', { nickname: authorNickname.value, email: authorInfo.value.email });

  } catch (err) {
    // 完善错误处理：避免err.message为undefined
    const errorMsg = err.message || '获取作家资料异常';
    console.error('[调试] 加载作家信息异常：', errorMsg);
    ElMessage.warning(errorMsg);
    // 异常时显示默认值，避免页面渲染错误
    authorNickname.value = '未知作家';
    authorAvatar.value = authorDefaultAvatar;
    authorInfo.value = { username: '未知', email: '未填写' };
  }
};

/** 3. 同步会话状态（可扩展：从会话接口获取，此处暂从历史消息推断） */
const syncSessionStatus = async () => {
  // 简化逻辑：默认活跃，若需精准状态可新增“获取会话详情”接口
  sessionStatus.value = 'active';
  // 实际项目可调用：getSessionDetail({ sessionId: sessionId.value }) 同步状态
};

/** 4. 发送消息（客服→作家：senderType=Admin，receiverType=User） */
const handleSendMessage = async () => {
  const content = inputMessage.value.trim();
  if (!content) {
    ElMessage.warning('消息内容不能为空');
    return;
  }
  if (!sessionId.value) {
    ElMessage.error('会话ID无效，无法发送消息');
    return;
  }
  if (!currentAdmin.value.id) {
    ElMessage.error('客服身份无效，请重新登录');
    router.push('/login');
    return;
  }

  loadingSend.value = true;
  try {
    const res = await sendMessage({
      sessionId: sessionId.value,
      senderType: currentAdmin.value.type, // Admin（客服）
      senderId: currentAdmin.value.id,    // 客服ID
      receiverType: targetAuthor.value.type, // User（作家）
      receiverId: targetAuthor.value.id,  // 作家ID
      content: content
    });

    if (res.data.code !== '0000') {
      throw new Error(`消息发送失败：${res.data.msg || '会话已关闭或参数错误'}`);
    }

    // 发送成功：清空输入框 + 追加消息到列表
    inputMessage.value = '';
    const newMsg = res.data.data || {};
    messageList.value.push(newMsg);
    scrollToLatestMessage();

  } catch (err) {
    console.error('[调试] 发送消息异常：', err.message || err);
    ElMessage.error(err.message || '消息发送失败，请重试');
  } finally {
    loadingSend.value = false;
  }
};

/** 5. 加载更多历史消息 */
const handleLoadMoreHistory = () => {
  const nextPage = pagination.value.page + 1;
  if (nextPage > pagination.value.totalPage) {
    hasMoreHistory.value = false;
    return;
  }
  loadChatHistory(nextPage);
};

/** 6. 作家资料弹窗操作 */
const handleOpenProfile = async () => {
  if (!authorId.value) {
    ElMessage.warning('暂无法获取作家资料，请先加载历史消息');
    showAuthorProfile.value = false;
    return;
  }
  loadingProfile.value = true;
  // 重新加载最新资料（避免缓存）
  await loadAuthorInfo();
  loadingProfile.value = false;
};

const handleCloseProfile = () => {
  showAuthorProfile.value = false;
};

/** 7. 返回作家列表 */
const handleGoBack = () => {
  router.push('/admin/service/ticket'); // 客服端作家列表路由（需与实际路由一致）
};

// -------------------------- 5. 生命周期与状态监听 --------------------------
onMounted(async () => {
  console.log('[调试] 客服端作家会话组件挂载：', {
    sessionId: sessionId.value,
    currentAdmin: currentAdmin.value,
    isLogin: !!userStore.user?.id
  });

  // 1. 检查登录状态（客服必须登录）
  if (!checkAdminLogin()) return;

  // 2. 检查会话ID（从路由参数获取）
  if (!sessionId.value) {
    ElMessage.error('未获取到会话ID，请从作家列表进入');
    handleGoBack();
    return;
  }

  // 3. 初始化：加载历史消息（触发作家信息、会话状态同步）
  await loadChatHistory();

  // 4. 监听会话ID变化（路由参数更新时重新加载）
  watch(() => route.params.sessionId, (newSessionId) => {
    if (newSessionId && newSessionId !== sessionId.value) {
      sessionId.value = newSessionId;
      messageList.value = [];
      pagination.value = { page: 1, pageSize: 20, total: 0, totalPage: 0 };
      loadChatHistory(); // 重新加载新会话的历史消息
    }
  });
});

// 调试用：监听关键状态变化
watch([sessionId, authorId, authorNickname], ([newSession, newAuthorId, newNick]) => {
  if (isDev) {
    console.log('[调试] 关键状态更新：', {
      sessionId: newSession,
      authorId: newAuthorId,
      authorNickname: newNick
    });
  }
}, { deep: true });
</script>

<style lang="scss" scoped>
/* 容器整体样式：与作家端保持一致，适配客服端视觉 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px); /* 减去顶部导航栏高度 */
  background-color: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 1. 顶部作家信息栏（替换作家端的客服信息栏） */
.chat-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eee;

  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    cursor: pointer; /* 点击头像查看资料 */
    .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .author-info {
    flex: 1;
    .author-name {
      font-size: 16px;
      font-weight: 500;
      margin: 0 0 4px;
      color: #333;
    }
    .session-status {
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-block;
    }
    .status-active {
      background-color: #e1f3d8;
      color: #67c23a;
    }
    .status-closed {
      background-color: #fef0f0;
      color: #f56c6c;
    }
  }

  .header-actions {
    display: flex;
    gap: 12px;
    .back-btn, .profile-btn {
      color: #409eff;
      font-size: 14px;
      &:hover {
        color: #66b1ff;
      }
    }
  }
}

/* 2. 中间消息列表区域（角色反转：客服发右，作家发左） */
.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* 骨架屏、无消息提示：与作家端一致 */
  .loading-skeleton { margin-bottom: 20px; .skeleton-item { width: 100%; margin-bottom: 12px; } }
  .empty-tip { margin: auto; }

  /* 消息项通用样式 */
  .message-item {
    display: flex;
    max-width: 70%; /* 限制消息宽度，提升可读性 */
    .message-bubble {
      padding: 12px 16px;
      border-radius: 16px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      .message-content {
        margin: 0 0 8px;
        line-height: 1.5;
        color: #333;
      }
      .message-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 11px;
        gap: 8px;
      }
      .send-time, .read-tag { color: #909399; }
    }
  }

  /* 客服发送的消息（右对齐：蓝色气泡） */
  .send-message {
    align-self: flex-end;
    .message-bubble {
      background-color: #409eff;
      .message-content { color: #fff; }
      .message-meta { .send-time, .read-tag { color: #e6f4ff; } }
    }
  }

  /* 作家发送的消息（左对齐：白色气泡） */
  .receive-message {
    align-self: flex-start;
    .message-bubble { background-color: #fff; }
  }

  /* 加载更多样式：与作家端一致 */
  .load-more-wrap { align-self: center; margin-top: 8px; .load-more-btn { color: #409eff; font-size: 14px; } }
  .loading-more-tip {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #909399;
    padding: 8px 0;
    .loading-text { font-size: 12px; }
  }
}

/* 3. 底部输入框区域：增加发送中状态的样式 */
.chat-input-area {
  padding: 16px 20px;
  background-color: #fff;
  border-top: 1px solid #eee;
  display: flex;
  gap: 12px;

  .message-input {
    flex: 1;
    textarea { resize: none; border-radius: 8px; font-size: 14px; }
  }

  .send-btn {
    width: 100px;
    align-self: flex-end;
    border-radius: 8px;
  }
}

/* 4. 作家资料弹窗样式（新增） */
.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 12px 0;

  .profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 8px;
    img { width: 100%; height: 100%; object-fit: cover; }
  }

  .profile-info {
    width: 100%;
    font-size: 14px;
    gap: 8px;
    display: flex;
    flex-direction: column;

    .label {
      color: #666;
      font-weight: 500;
      display: inline-block;
      width: 60px;
    }
  }
}

.profile-skeleton { margin: 16px 0; }
</style>